<template>
  <div>
    <el-dialog :title="`${$t('basic.stage')}：PH_JUMP`" :visible.sync="isShowJUMP" :close-on-click-modal="false"
      :before-close="handleClose" :width="screenWidth > 1310 ? '65%' : '70%'" v-dialogDrag>
      <el-form :model="formData" label-width="70px" ref="ruleForm" size="mini" :rules="rules" :hide-required-asterisk="true">
        <el-row :gutter="24" class="gz-form-row">
          
          <el-col :xs="5" :sm="4" :md="4" :lg="3" :xl="3">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.isAuto">{{$t('common.auto_start')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="6">
            <el-form-item :label="$t('common.start_delay')" label-width="70px" class="inputPadding">
              <el-input type="number" v-model="formData.delayTime">
                <template slot="append">min</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="5" :sm="4" :md="4" :lg="3" :xl="3">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.mode">{{$t('common.operation_signature')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="5" :sm="5" :md="5" :lg="3" :xl="3">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.checks">{{$t('common.review_confirmation')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-divider></el-divider>
        </el-row>

        <el-row :gutter="24" class="gz-form-row">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label-width="0">
              <p style="font-weight: bold">{{$t('dialog.jump_cond')}}</p>
            </el-form-item>
          </el-col>

          <el-col :xs="5" :sm="4" :md="4" :lg="2" :xl="2" offset="1">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.enableJmp1" @change="changeCheck">{{$t('common.enable')}}</el-checkbox>
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5" class="itemId">
            <el-form-item :label="$t('dialog.attr_name')">
              <el-select v-model="formData.jmpArg1" placeholder="">
                <el-option v-for="(item,index) in causeList" :key="index" :label="item.equipmentClassTagDefineVo.name"
                  :value="item.fid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="4" :xl="4" class="itemId">
            <el-form-item :label="$t('dialog.condition')" prop="jmpOper1" label-width="75px">
              <el-select v-model="formData.jmpOper1" placeholder="">
                <el-option v-for="(item,index) in operList" :key="index" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="5" :sm="4" :md="4" :lg="5" :xl="5">
            <el-form-item :label="$t('dialog.type')" label-width="96px">
              <el-select v-model="formData.jmpType1" placeholder="">
                <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.value"></el-option>
              </el-select>
              <!-- <el-switch v-model="formData.jmpType1" active-text="属性" inactive-text="常量" :disabled="!formData.enableJmp1"></el-switch> -->
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5" class="itemId" v-if="formData.jmpType1==1">
            <el-form-item :label="$t('dialog.attr_name')">
              <el-select v-model="formData.jmpArg11" placeholder="" clearable>
                <el-option v-for="(item,index) in causeList" :key="index" :label="item.equipmentClassTagDefineVo.name"
                  :value="item.fid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5" v-if="formData.jmpType1!=1">
            <el-form-item :label="$t('dialog.value')" prop="jmpVal1">
              <el-input type="number" v-enterNumber2 v-model="formData.jmpVal1" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" class="gz-form-row">
          <el-col :xs="5" :sm="4" :md="4" :lg="2" :xl="2" offset="1">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.enableJmp2" @change="changeCheck">{{$t('common.enable')}}</el-checkbox>
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5" class="itemId">
            <el-form-item :label="$t('dialog.attr_name')">
              <el-select v-model="formData.jmpArg2" placeholder="" :disabled="!formData.enableJmp2">
                <el-option v-for="(item,index) in causeList" :key="index" :label="item.equipmentClassTagDefineVo.name"
                  :value="item.fid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="4" :xl="4" class="itemId">
            <el-form-item :label="$t('dialog.condition')" prop="jmpOper2" label-width="75px">
              <el-select v-model="formData.jmpOper2" placeholder="" :disabled="!formData.enableJmp2">
                <el-option v-for="(item,index) in operList" :key="index" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="5" :sm="4" :md="4" :lg="5" :xl="5">
            <el-form-item :label="$t('dialog.type')" label-width="96px">
              <el-select v-model="formData.jmpType2" placeholder="" :disabled="!formData.enableJmp2">
                <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.value"></el-option>
              </el-select>
              <!-- <el-switch v-model="formData.jmpType2" active-text="属性" inactive-text="常量" :disabled="!formData.enableJmp2"></el-switch> -->
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5" class="itemId" v-if="formData.jmpType2==1">
            <el-form-item :label="$t('dialog.attr_name')">
              <el-select v-model="formData.jmpArg21" placeholder="" clearable :disabled="!formData.enableJmp2">
                <el-option v-for="(item,index) in causeList" :key="index" :label="item.equipmentClassTagDefineVo.name"
                  :value="item.fid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5" v-if="formData.jmpType2!=1">
            <el-form-item :label="$t('dialog.value')" prop="jmpVal2">
              <el-input type="number" v-enterNumber2 v-model="formData.jmpVal2" placeholder="" clearable
                :disabled="!formData.enableJmp2"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :xs="5" :sm="4" :md="4" :lg="2" :xl="2" offset="1">
            <el-form-item label="" label-width="0">
              {{$t('dialog.jump_relation')}}
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5">
            <el-form-item :label="$t('dialog.relation')" prop="relation">
              <el-select v-model="formData.relation" placeholder="" clearable :disabled="!formData.enableJmp2">
                <el-option v-for="(item,index) in relationList" :key="index" :label="item.name" :value="item.value"></el-option>
              </el-select>
              <!-- <el-switch v-model="formData.relation" active-text="与" inactive-text="或" :disabled="!formData.enableJmp2">
              </el-switch> -->
            </el-form-item>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4" offset="0">
            <el-form-item :label="$t('dialog.jump_step')" prop="toStepNo" label-width="80px">
              <el-input type="number" v-enterNumber2 v-model="formData.toStepNo" placeholder="" clearable></el-input>

              <!-- <el-select v-model="formData.toStepNo" placeholder="" clearable :disabled="!formData.enableJmp2">
                <el-option v-for="i in 32" :key=i :label=i :value=i></el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5">
            <el-form-item :label="$t('dialog.max_jump_count')" prop="maxNum" label-width="96px">
              <el-input type="number" v-model="formData.maxNum" placeholder=""></el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label-width="0">
              <p style="font-weight: bold">{{$t('recipe.phase_info')}}</p>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item :label="$t('common.operating_instructions')">
              <el-input rows="3" type="textarea" v-model="formData.guideInfo" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item :label="$t('basic.remarks')">
              <el-input rows="3" type="textarea" v-model="formData.flastModifyComment" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" :disabled="isreadOnly" :loading="loading"
          @click="handleConfirm('ruleForm')">{{ $t("common.preservation") }}</el-button>
        <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { configure } from "@/api/configure"
import { formula } from "@/api/formula"
export default {
  props: {
    isShowJUMP: Boolean,
    tdIndex: Number,
    stepObj: Object,
    isreadOnly: Boolean,
    equipId: String,
  },
  data () {
    let maxFn = (rule, value, callback) => {
      if (value) {
        if (value <= 0) {
          callback(new Error('应大于0'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    }
    let stepFn = (rule, value, callback) => {
      if (value) {
        if (parseFloat(value) >= parseFloat(this.tdIndex)) {
          callback(new Error('应小于当前布序'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    }
    return {
      screenWidth: document.body.clientWidth,
      formData: {
        seqNo: "",
        delayTime: "",
        mode: "",
        checks: "",
        stepNo: "",
        stepDesc: "",
        isActive: false,
        itemId: "",
        qty: "",
        uom: "",
        phaseDesc: "跳转阶段",
        confirm: "",
        flastModifyComment: "",
        guideInfo: "",
        isAuto: false,
        hi: "",
        lo: "",
        reasGrpId: "",
        stepSort: 0,

        toStepNo: 1,
        maxNum: 1,
        relation: false,

        enableJmp1: true,
        jmpArg1: "",
        jmpOper1: "1",
        jmpVal1: 0,
        jmpType1: true,
        jmpArg11: "",

        enableJmp2: false,
        jmpArg2: "",
        jmpOper2: "1",
        jmpVal2: 0,
        jmpType2: true,
        jmpArg21: "",
      },
      rules: {
        itemId: [{ required: true, message: '请选择物料名称', trigger: 'change' }],
        qty: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        maxNum: [{ validator: maxFn, trigger: 'blur' }],
        toStepNo: [{ validator: maxFn, trigger: 'change' }]
      },
      loading: false,
      materialList: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
      },
      pagerGroup: {
        pageNum: 1,
        pageSize: 50,
        keyword: ""
      },
      keyword: "",
      stepLoading: false,
      list: [],
      phaseId: "",
      fid: "",
      causeList: [],
      operList: [
        { "name": ">", "value": "1" },
        { "name": ">=", "value": "2" },
        { "name": "==", "value": "3" },
        { "name": "<=", "value": "4" },
        { "name": "<", "value": "5" },
      ],
      relationList: [
        { "name": "与", "value": true },
        { "name": "或", "value": false },
      ],
      typeList: [
        { "name": "属性", "value": true },
        { "name": "常量", "value": false },
      ],
    }
  },
  watch: {
    screenWidth (val) {
      this.screenWidth = Number(val)
    },
    isShowJUMP (val) {

      this.getUnitTagsDefineList()
      if (val) {
        this.formData.confirm = this.stepObj.confirm == 1 ? true : false
        this.formData.flastModifyComment = this.stepObj.flastModifyComment
        this.formData.guideInfo = this.stepObj.guideInfo
        this.formData.isActive = this.stepObj.isActive == 1 ? true : false
        this.formData.isAuto = this.stepObj.isAuto == 1 ? true : false
        this.formData.signitature = this.stepObj.signitature == 1 ? true : false
        this.formData.stepNo = this.tdIndex
        this.formData.mode = this.stepObj.mode == 1 ? true : false
        this.formData.checks = this.stepObj.checks == 1 ? true : false
        this.formData.delayTime = this.stepObj.delayTime

        this.phaseId = this.stepObj.fid || this.stepObj.fId
        this.formData.seqNo = this.tdIndex
        this.formData.phaseDesc = this.stepObj.texts
        if (this.stepObj.fid || this.stepObj.fId) {
          this.phaseOtmList()
        }
        this.formData.stepSort = this.stepObj.stepSort ?? 0
      } else {
        for (let key in this.formData) {
          this.formData[key] = ""
        }
        this.phaseId = ""
      }
    }
  },
  mounted () {
    const that = this

    window.addEventListener('resize', function () {
      that.screenWidth = document.body.offsetWidth;
    })
  },
  created () {

  },
  methods: {
    phaseOtmList () {
      const param = {
        phaseId: this.stepObj.fid
      }
      formula.phaseJumpList(param).then(res => {
        if (res.code == 200) {
          if (res.data.rows.length > 0) {
            this.list = res.data.rows

            this.formData.maxNum = res.data.rows[0].maxNum == null ? 1 : res.data.rows[0].maxNum
            this.formData.toStepNo = res.data.rows[0].toStepNo
            this.formData.relation = res.data.rows[0].relation == 1

            this.formData.jmpArg1 = res.data.rows[0].jmpArg1
            this.formData.jmpOper1 = res.data.rows[0].jmpOper1
            this.formData.enableJmp1 = res.data.rows[0].enableJmp1
            this.formData.jmpVal1 = res.data.rows[0].jmpVal1
            this.formData.jmpType1 = res.data.rows[0].jmpType1
            this.formData.jmpArg11 = res.data.rows[0].jmpArg11

            this.formData.jmpArg2 = res.data.rows[0].jmpArg2
            this.formData.jmpOper2 = res.data.rows[0].jmpOper2
            this.formData.enableJmp2 = res.data.rows[0].enableJmp2
            this.formData.jmpVal2 = res.data.rows[0].jmpVal2
            this.formData.jmpType2 = res.data.rows[0].jmpType2
            this.formData.jmpArg21 = res.data.rows[0].jmpArg21

            this.fid = res.data.rows[0].fid

          } else {
            this.fid = ''
            this.list = []
            this.formData.enableJmp1 = true
            this.formData.maxNum = 1
          }

        } else {
          this.fid = ''
          this.list = []
        }
      }).catch(e => {
        this.fid = ''
        this.list = []
      })
    },
    handleClose () {
      this.$refs["ruleForm"].resetFields();
      this.$emit("closePH", "JUMP")
    },
    handleConfirm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = {
            phaseDesc: this.formData.phaseDesc,
            isAuto: this.formData.isAuto == false ? 0 : 1,
            isActive: this.formData.isActive == false ? 0 : 1,
            checks: this.formData.checks == false ? 0 : 1,
            delayTime: this.formData.delayTime,
            operationId: this.stepObj.operationId,
            type: this.stepObj.type,
            confirm: this.formData.confirm == false ? 0 : 1,
            flastModifyComment: this.formData.flastModifyComment,
            guideInfo: this.formData.guideInfo,
            mode: this.formData.mode == false ? 0 : 1,
            seqNo: this.stepObj.seqNo,
            stepNo: this.stepObj.stepNo,
            phaseCode: this.stepObj.phaseCode,
            signitature: this.formData.signitature == false ? 0 : 1,
            serialNo: this.stepObj.serialNo,
            reasGrpId: this.formData.reasGrpId,
            stepSort: this.formData.stepSort,
          }
          if (this.phaseId) {
            param.fid = this.phaseId
          }
          this.loading = true
          formula.phaseAdd(param).then(res => {
            this.loading = false
            if (res.code == 200) {
              this.phaseOtmAdd()
            } else {
              this.$message.error(res.msg);
            }
          })
        }
      })
    },
    phaseOtmAdd () {
      const params = {
        phaseId: this.stepObj.fid,
        fid: this.fid,
        toStepNo: this.formData.toStepNo,
        maxNum: this.formData.maxNum,
        relation: this.formData.relation,

        enableJmp1: this.formData.enableJmp1,
        jmpArg1: this.formData.jmpArg1,
        jmpOper1: this.formData.jmpOper1,
        jmpVal1: this.formData.jmpVal1,
        enableJmp2: this.formData.enableJmp2,
        jmpArg2: this.formData.jmpArg2,
        jmpOper2: this.formData.jmpOper2,
        jmpVal2: this.formData.jmpVal2,

        jmpType1: this.formData.jmpType1,
        jmpArg11: this.formData.jmpArg11,
        jmpType2: this.formData.jmpType2,
        jmpArg21: this.formData.jmpArg21,

      }
      formula.phaseJumpAdd(params, this.list).then(res => {
        this.loading = false
        if (res.code == 200) {
          let obj = {
            mode: this.stepObj.mode,
            isAuto: this.formData.isAuto == false ? 0 : 1,
            isActive: this.formData.isActive == false ? 0 : 1,
            operationId: this.stepObj.operationId,
            seqNo: this.stepObj.seqNo,
            serialNo: this.stepObj.serialNo,
            text: this.stepObj.phaseDesc
          }
          this.$emit("uptionData", obj)
          this.$emit("closePH", "JUMP")
        } else {
          this.$message.error(res.msg);
        }
      }).catch(e => {
        this.loading = false
      })
    },
    changeItemId (val) {
      this.formData.uom = this.materialList.find(item => item.fid == val).uomId
    },
    changeIsActive (val) {
      this.$forceUpdate()
    },
    changeCheck (val) {
      this.$forceUpdate()
    },


    getUnitTagsDefineList () {

      const param = {
        eqmId: this.equipId,
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        field: this.pager.field,
        order: this.pager.order
      }
      this.tableLoading = true
      configure.getUnitTagsDefineList(param).then(res => {
        if (res.code == 200) {
          this.causeList = res.data.rows
          // this.pager.total = res.data.total
        }
        // this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
      })
    },
  }
}
</script>
<style scoped>
.itemId >>> .el-select {
  width: 100%;
}

.gz-form-row >>> .el-divider--horizontal {
  margin: 12px 0px;
}
</style>
